<template>
	<view>
		<view class="my-header">
			<view class="my-header_background">
				<image src="../../../static/background.jpg" mode=""></image>
			</view>
			<view class="my-header_logo">
				<view class="my-header_logo-box">
					<image :src="userinfo.avatar || '../../../static/suoda.jpg'" mode="aspectFill"></image>
				</view>
				<text class="my-header_nickname">{{username}}</text>
			</view>
			<view class="my-header_info">
				<view class="my-header_info-box" @click="collection()">
					<uni-icons class="my-header_info-icons" type="star-filled" size="28"></uni-icons>
					<text>收藏景点</text>
				</view>
				<view class="my-header_info-box" @click="holiday()">
					<uni-icons class="my-header_info-icons" type="heart-filled" size="28"></uni-icons>
					<text>历史记录</text>
				</view>
			</view>
		</view>
		<view class="my-content">
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons class="icons" type="contact" size="16" color="#666"></uni-icons>
					<text>个人设置</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666" @click="setting()"></uni-icons>
			</view>
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons class="icons" type="help" size="16" color="#666"></uni-icons>
					<text>意见反馈</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666" @click="feedback()"></uni-icons>
			</view>
			<view class="my-content_list">
				<view class="my-content_list-title">
					<uni-icons class="icons" type="locked" size="16" color="#666"></uni-icons>
					<text>密码修改</text>
				</view>
				<uni-icons type="arrowright" size="14" color="#666" @click="modify()"></uni-icons>
			</view>
		</view>
		<view class="my-main">
			<view class="my-logout">
				<view>
					<button type="warn" @tap="logout()">退出</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import MineTop from "../../../uni_modules/minetop/minetop.vue"
	import httpTypes from '@/js/http-types.js'
	export default {
		data() {
			return {
				userinfo:[],
				username: '',
				avatar: '',
			}
		},
		onLoad() {

		},
		methods: {
			collection() {
				console.log(this.userinfo);
			},
			
			holiday() {
				console.log(this.username);
			},
			
			setting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			
			feedback() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},

			logout() {
				uni.removeStorageSync('token');
				uni.showToast({
					title: '注销成功！'
				});
				uni.redirectTo({
					url: '../../welcome/welcome'
				})
			}
		},
		mounted() {
			httpTypes.request({
				url: 'admin/user/getUser',
				method: 'GET',
				success: (res) => {
					this.userinfo = res.data.data.User;
					this.username = res.data.data.User.username;
					this.avatar = res.data.data.User.avatar;
				}
			});
		},
		components: {
			MineTop
		} //组件注入的形式
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.my-header {
		position: relative;
		padding-bottom: 15px;

		.my-header_background {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			filter: blur(8px); //虚化
			opacity: 0.3; //透明化

			image {
				width: 100%;
				height: 100%;

			}
		}

		.my-header_logo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30px;

			.my-header_logo-box {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.my-header_nickname {
				margin-top: 15px;
				font-size: 16px;
				font-weight: bold;
			}
		}

		.my-header_info {
			margin-top: 15px;
			display: flex;

			.my-header_info-box {
				display: flex;
				flex-direction: column; //垂直排列
				justify-content: center; //左右居中
				align-items: center; //垂直居中
				width: 100%;
				font-size: 12px;
				color: #999;

				.my-header_info-icons {
					//font-size: 14px;
					color: #666;
				}
			}
		}
	}

	.my-content {
		.my-content_list {
			display: flex;
			justify-content: space-between;
			padding: 15px;
			margin-bottom: 10px;
			background-color: #fff;
			color: #333;
			font-size: 14px;

			.my-content_list-title {
				display: flex;
				align-items: center;

				.icons {
					margin-right: 5px;
				}
			}
		}
	}


	.my-main {
		display: flex;
		width: 100%;
		justify-content: center;
	}

	//注销
	.my-logout {
		display: flex;
		width: 70%;
		height: 600rpx;
		flex-direction: column; //垂直分布
		justify-content: space-between; //两端对齐
	}
</style>
